<template>
     <div ref="pages">
          <div id="components-modal-demo-position">
            <a-modal
              v-model="modalVisible"
              title="举报投诉须知"
              :footer="null"
              :zIndex="1000000"
              class="diy-mode-div"
              centered
              :closable="false"
              @cancel="() => onCancelModal()"
            >
              <p class="diy-modal-content">
                用户在写信时，请特别注意不要违反一下要求：<br> 
                1、必须遵守中华人民共和国的一切法律法规 <br>
                2、不允许发表任何非法的、骚扰性的、中伤他人的、伤害性的、庸俗的、淫秽等信息资料。 <br>
                每个留言者，必须认真填写个人信息，确保信息真实有效。 必填项：电话，身份证，姓名 <br>
                注意：身份信息不完整者不予以处理。
              </p>
              <div style="text-align: center;margin-top:43px;"><a-button type="primary" @click="onAgree">我已阅读并同意以上内容</a-button></div>
            </a-modal>
         </div>
        <div class="tabview newsPageDiv">
          <Breadcrumb 
            :breadcrumbName="breadcrumbName"
            :routerLikeTo="routerLikeTo"
          />
          <span class="news-text">举报投诉</span>   
           <a-divider style="margin: 20px 0;" />
          <div class="new-report-div" style="margin-top:40px;">
           <a-form-model layout="inline" :model="form" ref="formModal" :rules="rules">
               <a-form-model-item label="问题标题" prop="title" style="width:100%;" class="input-40">
                  <a-input v-model="form.title" placeholder="请输入" allow-clear style="width:775px;" ></a-input>
                </a-form-model-item>
               <a-form-model-item label="问题描述" prop="descripetion" style="width:100%;margin-top:40px;margin-bottom:15px;" >
                  <a-textarea v-model="form.descripetion" cols="10" rows="6" allow-clear style="OVERFLOW: hidden;width:775px;"></a-textarea>
               </a-form-model-item>
              <a-form-model-item label="问题类型" style="width:40%;margin-top:10px;margin-left:10px;" class="quesFrom" >
                <a-select  v-model="form.quesType" placeholder="请选择" style="width:252px;" >
                    <template v-for="item in questionType">
                      <a-select-option @click.native="setQuestionTypeId(item)" :key="item.value" :value="item.name">{{item.name}}</a-select-option>
                    </template>
                </a-select>
              </a-form-model-item>
              <a-form-model-item  label="举报人姓名" prop="jvbaoren" style="width:45%;margin-top:10px;"  class="input-40">
                 <a-input v-model="form.jvbaoren" allow-clear style="width:252px;"></a-input>
              </a-form-model-item>
             <a-form-model-item label="手机号" prop="phone" style="width:40%;margin-top:40px;margin-left:10px;"  class="input-40">
                  <a-input v-model="form.phone" allow-clear style="width:254px;margin-left: 4px;"></a-input>
              </a-form-model-item>
              <a-form-model-item label="身份证号" prop="idcard" style="width:45%;margin-top:40px;padding-left:14px;"  class="input-40">
                  <a-input v-model="form.idcard" allow-clear style="width:252px;    margin-left: 2px;"></a-input>
              </a-form-model-item>
              <a-form-model-item label="验证码" prop="code" style="width:40%;margin-top:40px;margin-left:22px;"  class="input-40" >
                    <!-- <a-input-search v-model="form.code" size="middle" placeholder="请输入验证码"  >
                      <a-button slot="enterButton">
                        <valid-code :value.sync="validCode" @input="getValidCode" :width="'40px'" :height="'30px'" ></valid-code>
                      </a-button>
                    </a-input-search> -->
                    <a-input v-model="form.code" allow-clear placeholder="请输入验证码" style="padding-left: 4px;">
                      <valid-code slot="addonAfter" :value.sync="validCode" @input="getValidCode" :width="'81px'" :height="'30px'"></valid-code>
                    </a-input>
                </a-form-model-item>
                 <a-form-model-item label="邮箱" prop="eMail" style="width:40%;margin-top:40px;margin-left:41px;"  class="input-40">
                    <a-input v-model="form.eMail" allow-clear style="width:252px;margin-left: 7px;" ></a-input>
                </a-form-model-item>
                <a-form-model-item label="联系地址" prop="address" style="width:100%;margin-top:40px;margin-left:8px;"  class="input-40" >
                    <a-input v-model="form.lxadreess" allow-clear style="width:252px;" ></a-input>
                </a-form-model-item>
                <a-form-model-item style="width:100%;margin-top:40px; margin-left:10px;">
                  <UploadImages ref="UploadImages" @getImages="getImages" />
                </a-form-model-item>
                <a-form-model-item label="是否公开" prop="idPublic" style="width:100%;margin-left:10px;margin-top:20px; ">
                  <a-radio-group v-model="form.idPublic">
                    <a-radio :value="true">
                      公开
                    </a-radio>
                    <a-radio :value="false">
                      不公开
                    </a-radio>
                </a-radio-group>
              </a-form-model-item>
              <a-form-model-item style="width:100%;margin-top:45px;">
                <a-button type="primary" @click="save">确认提交</a-button>
              </a-form-model-item>
            </a-form-model>
              
          </div>
          
          
        </div>
       <!-- <footerPage :page="4" ></footerPage> -->
       
    </div>
</template>

<script>
// import moment from "moment";
 import UploadImages from "@/components/base/upload/UploadImages";
 import Breadcrumb from "@/components/base/tools/Breadcrumb1";
//  import footerPage from '../../footer/footerPage';
 import validCode from '@/components/ValidCode';
 import { phoneValidata, idCardValidata, emailValidata } from "@/utils/common";
 import { Modal } from 'ant-design-vue';
 import api from '@/api/index'
 import emv from "@/views/center/emptyVue.vue";
  export default {
    name: "new_report",
    inject: ["changeTab"],
     components: {
      UploadImages,
      //  footerPage,
       validCode,
       Breadcrumb
    },
    props: {
      page: {
        type: String,
        default: '1'
      },
    },
     data(){
        let validateCode = (rule, value, callback) => {
        if (value === '' || value === null || value===undefined) {
          callback(new Error('请输入验证码'));
        } else if (value.toLowerCase().trim()!=this.validCode.toLowerCase().trim()) {
          callback(new Error("验证码输入错误！"));
        } else {
          callback();
        }
      };
      return{
        clientHeight:'',
        screenHeight:'',
        breadList: [],
        breadcrumbName:'',
        routerLikeTo:'/center/reportCenterPage',
        load: false,
        labelCol: { span: 3 },
        wrapperCol: { span: 12 },
        wrapperCol1: { span: 8 },
        validCode:'',
        modalVisible: true,
        form: {},
        rules: {
          title: [{ required: true, message: "请输入" }],
          descripetion: [{ required: true, message: "请输入" }],
          jvbaoren: [{ required: true, message: "请输入" }],
          idPublic: [{ required: true, message: "请选择是否公开" }],
          phone: [
            { required: true, message: "请输入" },
            {
              validator: phoneValidata
            }
          ],
          idcard: [
            { required: true, message: "请输入身份证号" },
            {
              validator: idCardValidata
            }
          ],
          eMail: [
            { required: false },
            {
                validator: emailValidata
            }
          ],
          code: [{validator: validateCode, trigger: 'change' }],//[{ required: true, message: "请输入" }],
        },
     
        questionType:[
          {
            value:'1',
            name:'公共工程类',
          },
          {
            value:'2',
            name:'饮水安全类',
          },
          {
            value:'3',
            name:'其他',
          },
        ],
        formInline: {
        user: '',
        password: '',
      },
      }
      
    },
    mounted(){
     this.$nextTick(()=>{ // 页面渲染完成后的回调
                  this.getScreenHeight();
                  this.clientHeight = this.$refs.pages.offsetHeight+364;
                  // console.log(this.screenHeight,this.clientHeight);
                  if(this.screenHeight>this.clientHeight){
                    if(this.screenHeight-this.clientHeight>40){
                      emv.$emit("setfootmargintop",this.screenHeight-this.clientHeight);
                    }else{
                       emv.$emit("setfootmargintop",40);
                    }
                  }else{
                    emv.$emit("setfootmargintop",40);
                  }
                 
          });

    },
    created(){
      this.breadcrumbName = this.$route.query.breadcrumbName;
      this.changeTab(7, "reportCenterPage", '<span class="tab_name">举报投诉</span>');
    },
    methods: {
      getScreenHeight(){
        // 获取浏览器可视区域高度
        this.screenHeight =    document.body.clientHeight ; //`${document.documentElement.clientHeight}` 
        window.onresize = function temp() {
          this.screenHeight = document.body.clientHeight;
        };
      },
      setQuestionTypeId(item){
          this.form.quesTypeId = item.value
      },
      save(){
        this.form.processStatus="待受理"
        this.$refs.formModal.validate(valid => {
        if (valid) {
           api.save_report(this.form).then(res => {
                if (res) {
                  this.$message.success("提交成功");
                  this.$router.go(-1);
                }
              }) 
              .catch(err => {
                  console.log(err);
              });
        
          }
        });
      },
      getValidCode(code){
        this.validCode = code;
      },
      onAgree(){
        this.modalVisible = false;
      },
      onCancelModal(){
      },
      getImages(data) {
        if(data.length>0) {
          this.form.pics = JSON.stringify(data);
        }
        
      },
      
    },
  };
</script>
<style lang="less">
.breadcrumb{
  margin-top: 20px;
  margin-bottom: 15px;
  
}
.diy-mode-div{
  .anticon {
    display: none;
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -0.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .ant-modal-header {
    padding: 16px 24px;
    padding-bottom: 0px;
    padding-top: 15px;
    color: rgba(0, 0, 0, 0.65);
    background: #fff;
    border-bottom: 0;
    text-align: center;
  }
  .ant-modal-body {
    padding: 15px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
  }
  .ant-modal-title {
      margin: 0px;
      color: #303030;
      font-weight: 400;
      font-size: 20px;
      line-height: 22px;
      font-family: Microsoft YaHei;
      word-wrap: break-word;
  }

  .ant-modal-content {
      position: relative;
      background-color: #fff;
      background-clip: padding-box;
      border: 10px solid #337BD7;
      border-radius: 10px;
      -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      pointer-events: auto;
      width: 695px;
      height: 474px;
      background: #FFFFFF;
  }
  .ant-modal-wrap {
      position: fixed;
      top: 0;
      right: -150px;
      bottom: 0;
      left: 0;
      z-index: 1000;
      overflow: auto;
      outline: 0;
      -webkit-overflow-scrolling: touch;
  }

  .ant-modal-close {
      position: absolute;
      top: -12px;
      right: -35px;
      z-index: 10;
      padding: 0;
      color: rgba(0, 0, 0, 0.45);
      font-weight: 700;
      line-height: 1;
      text-decoration: none;
      // background: transparent;
      background-image: url(../../../assets/icon_close.png);
      background-size: 100% 100%;
      width: 20px;
      height: 20px;
      border: 0;
      outline: 0;
      cursor: pointer;
      -webkit-transition: color 0.3s;
      transition: color 0.3s;
      // display: none;
  }


  .diy-modal-content {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #4D4D4D;
    line-height: 35px;
    height: 224px;
    width: 586px;
    margin-left: 26px;
    margin-top: 22px;
  }
  .ant-modal-wrap {
    position: fixed;
    top: 0;
    right: 145px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    overflow: auto;
    outline: 0;
    -webkit-overflow-scrolling: touch;
  }
  .ant-modal-title {
    margin: 0px;
    color: #303030;
    font-weight: 400;
    font-size: 30px;
    line-height: 22px;
    font-family: Microsoft YaHei;
    word-wrap: break-word;
  }
  .ant-modal-header {
    padding: 16px 24px;
    padding-bottom: 0px;
    padding-top: 50px;
    color: rgba(0, 0, 0, 0.65);
    background: #fff;
    border-bottom: 0;
    text-align: center;
  }
  
  .ant-btn-primary {
    width: 280px;
    height: 50px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #fff;
    background-color: #337BD7;
    border-color: #337BD7;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
}


.new-report-div{
  .quesFrom{
     .ant-form-inline .ant-form-item > .ant-form-item-control-wrapper, .ant-form-inline .ant-form-item > .ant-form-item-label {
        display: inline-block;
        vertical-align: middle;
    }
   }
  .ant-input-group .ant-input {
    float: left;
    width: 100%;
    margin-bottom: 0;
    text-align: inherit;
    width: 150px;
  }
  .ant-form label {
    font-size: 16px;
  }
  .input-40{
    .ant-input-affix-wrapper .ant-input {
      position: relative;
      text-align: inherit;
      height: 40px;
   }
  }

  .ant-select-selection--single {
      position: relative;
      height: 40px;
      cursor: pointer;
   }
   .ant-select-selection__placeholder, .ant-select-search__field__placeholder {
      position: absolute;
      top: 50%;
      right: 9px;
      left: 0;
      max-width: 100%;
      height: 50px;
      margin-top: -10px;
      overflow: hidden;
      color: #bfbfbf;
      line-height: 29px;
      white-space: nowrap;
      text-align: left;
      text-overflow: ellipsis;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
   }

.ant-upload.ant-upload-select-picture-card {
    display: table;
    float: left;
    width: 160px;
    height: 160px;
    margin-right: 8px;
    margin-bottom: 8px;
    text-align: center;
    vertical-align: top;
    background-color: #fafafa;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    -webkit-transition: border-color 0.3s ease;
    transition: border-color 0.3s ease;
}

.ant-btn-primary {
    width: 200px;
    height: 50px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #fff;
    background-color: #337BD7;
    border-color: #337BD7;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
   
}
.new-report-div .input-40 .ant-input-affix-wrapper .ant-input {
    position: relative;
    text-align: inherit;
    height: 40px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
}
</style>